<template>
    <sub-box>
        <breadcrumb :title="'申请详情'"></breadcrumb>
        <div v-loading="loading">
            <div class="box white-block" v-if="detail&&detail.flowList[0]">
                <el-timeline>
                    <el-timeline-item :type="list.type==1?'primary':(list.type==2?'success':'danger')"
                                      v-for="(list,index) in detail.flowList" :key="index">
                        <div class="timeline-card">
                            <el-card class="mr20">
                                <template v-if="list.flowState==1">
                                    <p class="time" v-if="list.type==1">待审核</p>
                                    <!--<p class="time" v-if="list.type==1">申请提交</p>-->
                                    <p class="time" v-else-if="list.type==2">审核通过</p>
                                    <p class="time" v-else-if="list.type==3">审核不通过</p>
                                </template>
                                <template v-else>
                                    <p class="time">已取消</p>
                                </template>
                                <p class="name clearfix">
                                    <span>{{list.createTime}}</span>
                                    {{list.opUserDept}}
                                    <i v-if="list.opUserName">{{list.opUserName}}</i>
                                </p>
                                <p class="remark" :class="{error:list.type==3}" v-if="list.opinion">
                                    审核说明：{{list.opinion}}
                                </p>
                            </el-card>
                            <div class="timeline-btn" v-if="list.type==3">
                                <el-button type="primary" class="limit" @click="openHistory(index)">查看历史版本</el-button>
                            </div>
                        </div>
                    </el-timeline-item>
                </el-timeline>
            </div>
            <div class="white-block mt20" v-if="detail">
                <table-example :data="detail.resList" :tableColumn="header" class="mt20">
                </table-example>
            </div>
            <div class="box-th white-block mt20" v-if="detail">
                <div class="form-common clearfix">
                    <div class="form-item">
                        <div class="form-item-label">绑定应用</div>
                        <div class="form-item-content">
                            <div v-for="(list,index) in detail.appList" :key="index">
                                <div>{{list.appName}}</div>
                                <div>
                                    唯一代码：{{list.appCode}};
                                    IP地址：{{list.ipList.join(', ')}}
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="form-item">
                        <div class="form-item-label">申请机构</div>
                        <div class="form-item-content">{{detail.deptName}}</div>
                    </div>
                    <div class="form-item">
                        <div class="form-item-label">申请人</div>
                        <div class="form-item-content">{{detail.userName}}</div>
                    </div>
                    <div class="form-item">
                        <div class="form-item-label">联系人</div>
                        <div class="form-item-content">{{detail.contactName}}</div>
                    </div>
                    <div class="form-item">
                        <div class="form-item-label">联系电话</div>
                        <div class="form-item-content">{{detail.contactTel}}</div>
                    </div>
                    <div class="form-item">
                        <div class="form-item-label">申请说明</div>
                        <div class="form-item-content">{{detail.remark}}</div>
                    </div>
                    <div class="form-item">
                        <div class="form-item-label">相关文件</div>
                        <div class="form-item-content">
                            <div v-for="(list,index) in detail.enclosures" :key="index">
                                <i class="el-icon-document"></i>{{list.fileName}}
                                <a :href="list.path" target="_blank" class="ml20">
                                    <el-button type="primary" size="mini">下载</el-button>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <transition name="slide">
            <router-view></router-view>
        </transition>
    </sub-box>
</template>

<script>
    import subBox from '../../components/layout/layout-sub'
    import breadcrumb from '../../components/breadcrumb'
    import tableExample from '../../components/table'

    export default {
        data() {
            return {
                header: [
                    {
                        prop: 'name',
                        label: '姓名',
                        minWidth: '50%',
                        align: 'center'
                    },
                    {
                        prop: 'resSource',
                        label: '提供单位',
                        minWidth: '50%',
                        align: 'center'
                    }
                ],
                itemId: '',
                orderNo: '',
                detail: null,
                loading: false,
                historyList: []
            }
        },
        mounted() {
            if (this.$route.query.itemId) this.itemId = this.$route.query.itemId
            if (this.$route.query.orderNo) this.orderNo = this.$route.query.orderNo
            this.getDetail()
        },
        watch: {
            detail(val) {
                if (val) {
                    val.flowList.forEach((item, index) => {
                        if (item.type === 3) this.historyList.push(index)
                    })
                }
            }
        },
        methods: {
            getDetail() {
                this.loading = true
                this.$http.get('/admin/workbench/getOrderDetail', {
                    itemId: this.itemId,
                    orderNo: this.orderNo
                }).then(result => {
                    this.loading = false
                    if (result.success) {
                        this.detail = result.data
                    }
                    this.$method.updateView(false, true)
                }).catch(() => {
                    this.loading = false
                })
            },
            openHistory(index) {
                this.$router.push({
                    path: this.$route.path + '/history',
                    query: {
                        versionNo: this.historyList.indexOf(index) + 1,
                        orderNo: this.detail.orderItemNo
                    }
                })
            }
        },
        components: {
            breadcrumb,
            tableExample,
            subBox
        }
    }
</script>
<style scoped lang="less">
    .box {
        padding-left: 2.5rem;
        .timeline-card {
            display: inline-flex;
            align-items: center;
            > * {
                flex: auto;
            }
            .el-card {
                width: 8rem;
            }
            .timeline-btn {
                button {
                    border-radius: .2rem;
                }
            }
        }
        .time {
            font-size: .2rem;
            margin-bottom: .03rem;
        }
        .name {
            span {
                float: right;
            }
        }
        .remark {
            color: #999;
            &.error {
                color: #E00000;
            }
        }

    }

    .box-th {

        .title {
            overflow: hidden;
            line-height: .3rem;

            span {
                padding: .1rem;
                float: left;
                color: #999;
                font-size: .16rem;
            }

            .p {
                float: left;
                margin-left: .4rem;
                font-size: .16rem;
                padding: .1rem;
            }

            .people {
                margin-left: .6rem;

            }

            .btn {
                border-radius: 0;
                margin-left: .2rem;
            }
        }

    }
</style>
